<script setup>
import { computed, defineEmits, defineProps} from 'vue'
import {ElImage, ElTag,  dayjs} from 'element-plus'
import { Picture, User, Calendar } from '@element-plus/icons-vue'

const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['close'])

// 响应式咨询师数据（示例数据）
const consultants = [
  {id: 1, name: "张三", avatar: "/avatars/1.jpg"},
  {id: 2, name: "李四", avatar: "/avatars/2.jpg"},
  {id: 3, name: "王五", avatar: "/avatars/3.jpg"},
]

// 计算属性优化
const consultantInfo = computed(() =>
    consultants.find(c => c.id === props.data.consultantId) || { name: '未知咨询师' }
)

const imageUrl = computed(() => {
  if (!props.data.image) return ''
  return `/api/img?url=${encodeURIComponent(props.data.image)}&size=medium`
})

// 时间格式化
const formatTime = (timeStr) => {
  return dayjs(timeStr).format('YYYY-MM-DD HH:mm')
}
</script>

<template>
  <div class="detail-container">
    <!-- 头部信息卡片 -->
    <div class="header-card">
      <el-image
          v-if="data.image"
          :src="imageUrl"
          class="header-image"
          fit="cover"
      >
        <template #error>
          <div class="image-fallback">
            <el-icon :size="40"><Picture /></el-icon>
          </div>
        </template>
      </el-image>

      <div class="header-meta">
<!--        <h2 class="title">{{ data.title || '无标题' }}</h2>-->
        <div class="meta-row">
          <el-tag type="info" effect="light">
            <el-icon><User /></el-icon>
            记录ID: {{ data.id }}
          </el-tag>
          <el-tag :type="data.isReviewed ? 'success' : 'warning'" effect="light">
            {{ data.isReviewed ? '待评价' : '已评价' }}
          </el-tag>
        </div>
      </div>
    </div>

    <!-- 详细信息栅格布局 -->
    <el-row :gutter="20" class="detail-grid">
      <!-- 用户侧信息 -->
      <el-col :md="12" class="detail-section">
        <div class="info-block">
          <h3 class="section-title"><el-icon><User /></el-icon> 用户信息</h3>
          <div class="info-item">
            <span class="label">用户姓名：</span>
            <el-text>{{ data.userName }}</el-text>
          </div>
          <div class="info-item">
            <span class="label">咨询时间：</span>
            <el-text>{{ formatTime(data.consultationTime) }}</el-text>
          </div>
        </div>

        <div class="info-block">
          <h3 class="section-title"><el-icon><Comment /></el-icon> 诊断记录</h3>
          <el-scrollbar class="content-box">
            {{ data.diagnosisRecord || '暂无诊断记录' }}
          </el-scrollbar>
        </div>
      </el-col>

      <!-- 咨询师侧信息 -->
      <el-col :md="12" class="detail-section">
        <div class="info-block">
          <h3 class="section-title"><el-icon><Avatar /></el-icon> 咨询师信息</h3>
          <div class="consultant-card">
            <el-avatar :size="60" :src="consultantInfo.avatar" />
            <div class="consultant-info">
              <h4>{{ consultantInfo.name }}</h4>
<!--              <el-rate
                  v-model="data.reviewRating"
                  disabled
                  :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
              />-->
            </div>
          </div>
        </div>

        <div class="info-block">
          <h3 class="section-title"><el-icon><ChatLineSquare /></el-icon> 用户评价</h3>
          <div v-if="data.isReviewed==0" class="review-content">
            <el-scrollbar class="content-box">
              {{ data.reviewContent || '用户未填写评价内容' }}
            </el-scrollbar>
            <div class="review-time">
              <el-icon><Calendar /></el-icon>
              {{ formatTime(data.reviewTime) }}
            </div>
          </div>
          <el-empty v-else description="尚未进行评价" />
        </div>
      </el-col>
    </el-row>

    <!-- 操作按钮 -->
    <div class="action-bar">
      <el-button
          type="primary"
          plain
          @click="emit('close')"
      >
        关闭详情
      </el-button>
    </div>
  </div>
</template>

<style scoped>
.detail-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}

.header-card {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--el-border-color-light);
}

.header-image {
  width: 180px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.header-meta {
  flex: 1;
  .title {
    margin: 0 0 12px;
    color: var(--el-text-color-primary);
  }
  .meta-row {
    display: flex;
    gap: 8px;
    align-items: center;
  }
}

.detail-grid {
  margin-top: 24px;
}

.detail-section {
  padding: 0 12px;
}

.info-block {
  margin-bottom: 24px;
  .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    color: var(--el-text-color-primary);
    font-size: 16px;
  }
}

.content-box {
  padding: 12px;
  background: var(--el-fill-color-light);
  border-radius: 6px;
  min-height: 120px;
  max-height: 200px;
}

.consultant-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--el-fill-color-lighter);
  border-radius: 8px;
}

.review-content {
  position: relative;
  .review-time {
    margin-top: 12px;
    color: var(--el-text-color-secondary);
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 4px;
  }
}

.action-bar {
  margin-top: 32px;
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid var(--el-border-color-light);
}

/* 响应式处理 */
@media (max-width: 768px) {
  .header-card {
    flex-direction: column;
    .header-image {
      width: 100%;
      height: 180px;
    }
  }

  .detail-section {
    margin-bottom: 24px;
  }
}
</style>